<template>
	<view class="app-container">
		<!-- <u-index-list :index-list="indexList" activeColor="#1891d6" :sticky="false"> -->
		<scroll-view scroll-y="true" style="height: 100vh;">
			<view>
				<u-index-list activeColor="#1891d6" :sticky="false">
					<view class="share" @click="handleShare">
						<u-avatar src="../../static/image/invite.png" shape="square"></u-avatar>
						<view class="text">分享邀请</view>
					</view>
					<view class="label-txt">我的下级好友</view>
					<template v-for="(item, index) in friendList">
						<!-- #ifdef APP-NVUE -->
						<!-- <u-index-anchor :text="indexList[index]" bgColor="#f8f8f8"></u-index-anchor> -->
						<!-- #endif -->
						<u-index-item>
							<!-- #ifndef APP-NVUE -->
							<!-- <u-index-anchor :text="indexList[index]" bgColor="#f8f8f8"></u-index-anchor> -->
							<!-- #endif -->
							<view class="list-cell">
								<u-avatar :src="item.avatar" shape="square"></u-avatar>
								<view class="center">
									<view class="nickname">{{item.nickName}}</view>
									<view class="c-bottom">
										<text>等级：{{item.vpnLevel}}</text>
										<text class="activateCount">活跃度：{{item.activateCount}}</text>
									</view>
								</view>
								<view class="isAuth">
									<u-tag plain size="mini" :text="!item.isAuth ? '待认证' :'已认证'"
										:type="!item.isAuth ? 'error' :'warning'"></u-tag>
								</view>
							</view>
						</u-index-item>
					</template>
					<u-empty v-if="friendList.length == 0" class="empty" mode="list"
						icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</u-index-list>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				indexList: ["↑", "✩"],
				itemArr: [],
				src: "https://ts1.cn.mm.bing.net/th/id/R-C.7cfe5925455f680bac0ebd3882390250?rik=G%2fC249c2X%2bEsHA&riu=http%3a%2f%2ftupian.qqw21.com%2farticle%2fUploadPic%2f2012-7%2f201271317134131.jpg&ehk=8dIgz9NbmBwS5kT6pQ0E%2bh1ZUHu0jjcYGTmMieu5jBE%3d&risl=&pid=ImgRaw&r=0",
				friendList: []
			}
		},
		onShow() {
			this.formStr();
			this.have();
			this.getFriendList()
		},
		methods: {
			formStr() {
				for (let i = 65; i < 91; i++) {
					let str = String.fromCharCode(i);
					this.indexList.push(str)
				}
				this.indexList.push("#")
			},
			// 计算itemArr的第一列数据首字母与indexList相等不
			have() {
				let arr = ['啊才A1列表', '吃啊列表A2', '吧列表A3']
				arr.sort()
				// console.log(arr);
			},
			// 取首字母
			getFirstChineseLetter(obj) {
				if (typeof str !== "string") return;

				let str = obj.charAt(0);
				let uni = obj.charCodeAt(0);
				//不是中文，直接返回
				if (uni > 40869 || uni < 19968) {
					return str;
				} else {
					return C2Pin.firstChar(str);
				}
			},
			getFriendList() {
				getList().then(res => {
					// console.log(res);
					if (res.length > 0) {
						this.friendList = res
					} else {
						this.friendList = []
					}
				})
			},
			handleShare() {
				uni.navigateTo({
					url: "/pages/share/share"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #f8f8f8;
		background: url("@/static/image/12.jpg") no-repeat;
		background-size: 100% 100%;
	}

	.app-container {

		.share {
			padding: 7px 0 7px 15px;
			height: 47px;
			display: flex;
			align-items: center;
			background-color: #fff;

			.text {
				width: 100%;
				line-height: 40px;
				margin-left: 10px;
				// border-bottom: 1px solid rgb(214, 215, 217);
			}
		}

		.label-txt {
			font-size: 14px;
			font-weight: 400;
			padding: 10px 20px;
			color: #5fe5ed;
		}
	}

	.list-cell {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 0 20px 0 12px;
		// overflow: hidden;
		color: #323233;
		font-size: 14px;
		background-color: #fff;
		height: 60px;
		margin-bottom: 10px;

		.center {
			flex: 1;
			margin-left: 10px;
			// outline: 1px solid red;

			.c-bottom {
				width: 90%;
				padding-top: 5px;
				border-top: 1rpx solid rgb(214, 215, 217);

				.activateCount {
					margin-left: 15px;
				}
			}
		}

		.nickname {
			color: #000;
			font-size: 16px;
			// line-height: 60px;

		}
	}

	.empty {
		padding-top: 50px;
	}

	/deep/.u-index-anchor {
		position: relative;
	}
</style>
